<template>
  <div class="SF_info">
    <div class="query">随访任务 <span style="float: right;"><el-button size="small" @click="fh">返回</el-button></span></div>
    <div class="main">
      <ul>
        <li class="li_item" v-for="item in 3" :key="item" @click="open">
          <p class="bg_c">单纯糖尿病患者</p>
          <div class="item_main">单纯糖尿病患者</div>
        </li>
      </ul>
      <ul>
        <li class="li_item" v-for="item in 3" :key="item" @click="open">
          <p class="bg_c2">单纯糖尿病患者</p>
          <div class="item_main">单纯糖尿病患者</div>
        </li>
      </ul>
      <ul>
        <li class="li_item" v-for="item in 1" :key="item" @click="open">
          <p class="bg_c">单纯糖尿病患者</p>
          <div class="item_main">单纯糖尿病患者</div>
        </li>
      </ul>
      <ul>
        <li class="li_item" v-for="item in 1" :key="item" @click="open">
          <p class="bg_c">单纯糖尿病患者</p>
          <div class="item_main">单纯糖尿病患者</div>
        </li>
      </ul>
    </div>
    <!-- 弹层 -->
    <el-drawer
      title="设置触达"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      :append-to-body="true"
      size="60%"
    >
      <el-form ref="form" :model="form" label-width="160px">
        <el-form-item label="触达名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="触达描述">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item label="触达策略">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="触达内容">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item label="执行时间类型">
          <el-radio-group v-model="form.radio3" size="small">
            <el-radio-button label="按时间"></el-radio-button>
            <el-radio-button label="按日期"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="相对时间节点类型">
          <el-radio-group v-model="form.radio3" size="small">
            <el-radio-button label="按时间"></el-radio-button>
            <el-radio-button label="按日期"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="入组后">
          <el-input-number
            v-model="form.num"
            :min="1"
            :max="10"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="即时配送">
          <el-time-picker
            v-model="form.value1"
            placeholder="任意时间点"
          >
          </el-time-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">保存</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
      direction: "rtl",
      form: {},
    };
  },
  methods: {
    handleClose() {
      this.drawer = false;
    },
    fh(){
        this.$router.push('/SF/item')
    },
    open() {
      this.drawer = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.SF_info {
  padding: 15px;
  .query {
    background-color: #eee;
    padding: 10px;
    font-weight: 900;
    color: #000;
    font-size: 20px;
    border-bottom: 1px solid #333;
  }
  .main {
    background-color: #fff;
    padding: 10px;
    text-align: center;
    .li_item {
      display: inline-block;
      width: 300px;
      border: 1px solid #ccc;
      margin: 20px;
      text-align: left;
      .bg_c {
        background-color: rgb(86, 103, 140);
        color: #fff;
        font-weight: 700;
        padding: 5px;
        margin: 0;
        text-align: left;
      }
      .bg_c2 {
        background-color: rgb(255, 142, 67);
        color: #fff;
        font-weight: 700;
        padding: 5px;
        margin: 0;
        text-align: left;
      }
      .item_main {
        padding: 8px;
        line-height: 30px;
      }
    }
  }
}
</style>